<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('课程首页')"/>
    <link rel="stylesheet" href="/editormd/css/style.css"/>
    <link rel="stylesheet" href="/editormd/css/editormd.preview.css"/>

    <style>
        body {
            padding: 40px;
        }

        #layout > header, .btns {
            width: auto;
        }

        #sidebar {
            width: 400px;
            height: 100%;
            position: fixed;
            top: 0;
            right: 0;
            overflow: hidden;
            background: #fff;
            z-index: 100;
            padding: 18px;
            border: 1px solid #ddd;
            border-top: none;
            border-bottom: none;
        }

        #sidebar:hover {
            overflow: auto;
        }

        #sidebar h1 {
            font-size: 16px;
        }

        #custom-toc-container {
            padding-left: 0;
        }

        #test-editormd-view, #test-editormd-view2 {
            padding-left: 0;
            padding-right: 430px;
            margin: 0;
        }
    </style>


</head>
<body>
<div id="layout">

    <!-- 1. 标题 -->
    <div class="row">
        <div class="col-sm-5">
            <div class="jumbotron">
                <h1 th:text="${chapter.name}"></h1>
                <p th:text="${chapter.description}"></p>
                </p>
            </div>
        </div>
    </div>

    <!-- 2. 子章节目录 -->
    <div class="row" th:if="${chapters.size()}>0">
        <div class="col-sm-7">

                    <table class="table table-bordered white-bg">
                        <thead>
                        <tr>
                            <th>子章节</th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr th:each="c:${chapters}">
                            <td th:text="${c.name}">

                            </td>
                        </tr>

                        </tbody>
                    </table>
        </div>
    </div>

    <!-- 3. 知识点内容 -->
    <div id="sidebar">
        <h1>Table of Contents</h1>
        <div class="markdown-body editormd-preview-container" id="custom-toc-container">#custom-toc-container</div>
    </div>

    <div id="test-editormd-view">
        <textarea style="display:none;" name="test-editormd-markdown-doc"></textarea>
    </div>

    <div id="test-editormd-view2">
        <textarea id="append-test" style="display:none;">
        </textarea>
    </div>

    <!-- 4. 相关下载 -->
<!--    <h1>相关下载</h1>-->

    <!-- 5. 相关讨论
    <h1>相关讨论</h1>
</div>
<!-- <script src="js/zepto.min.js"></script>
<script>
    var jQuery = Zepto;  // 为了避免修改flowChart.js和sequence-diagram.js的源码，所以使用Zepto.js时想支持flowChart/sequenceDiagram就得加上这一句
</script> -->
<script src="/js/jquery.min.js"></script>
<script src="/editormd/lib/marked.min.js"></script>
<script src="/editormd/lib/prettify.min.js"></script>

<script src="/editormd/lib/raphael.min.js"></script>
<script src="/editormd/lib/underscore.min.js"></script>
<script src="/editormd/lib/sequence-diagram.min.js"></script>
<script src="/editormd/lib/flowchart.min.js"></script>
<script src="/editormd/lib/jquery.flowchart.min.js"></script>

<script src="/editormd/editormd.js"></script>
<script type="text/javascript">
    $(function () {
        var testEditormdView, testEditormdView2;



        var c = $.ajax({
            type: "GET",
            url: "/school/knowledge/getKnow",
            data:{
                id: [[${know}!=null?${{know.id}}:0]]
            },
            success: function(content) {
                testEditormdView = editormd.markdownToHTML("test-editormd-view", {
                    markdown: content,//+ "\r\n" + $("#append-test").text(),
                    //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                    htmlDecode: "style,script,iframe",  // you can filter tags decode
                    //toc             : false,
                    tocm: true,    // Using [TOCM]
                    tocContainer: "#custom-toc-container", // 自定义 ToC 容器层
                    //gfm             : false,
                    //tocDropdown     : true,
                    // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
                    emoji: true,
                    taskList: true,
                    tex: true,  // 默认不解析
                    flowChart: true,  // 默认不解析
                    sequenceDiagram: true,  // 默认不解析
                    codeFold : true,
                    htmlDecode : true,
                });
            }

        });



        //console.log("返回一个 jQuery 实例 =>", testEditormdView);

        // 获取Markdown源码
        //console.log(testEditormdView.getMarkdown());

        //alert(testEditormdView.getMarkdown());


        testEditormdView2 = editormd.markdownToHTML("test-editormd-view2", {
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
        });
    });
</script>
</body>

</html>
